<template>
	<view class="main">
		<!-- 搜索栏 -->
		<input type="text" v-model="key" confirm-type="search" placeholder="请输入搜索内容" @confirm="search" />
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" circular="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item  v-for="item,index in pics">
				<view class="swiper-item">
					<image :src="item.advImg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">推荐服务</view>
		<!-- 服务列表 -->
		<view class="service">			
			<view class="item" v-for="item,index in services" @tap="toservice(index)">
			 <image :src="item.imgUrl" mode=""></image>
				<view>{{item.serviceName}} </view>
			</view>
		</view>
		<!-- 新闻 -->
		<view class="news">
			<!-- 新闻类别 -->
			<view class="tab">
				 <view :class="{item,active:index==actIndex}" @tap="chg(index,item.id)"  v-for="item,index in newsTypes">{{item.name}}</view>		
			</view>
			<!-- 类别新闻列表 -->
			<view class="newslist" v-for="item,index in newsList">
				<view class="pic">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="content">
					<view class="ntitle">{{item.title}}</view>
					<view class="msg" v-html="item.content"></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad(() => {
		getSwiper()
		getService()
		getNewsTypes()
		
	})

	const key = ref("")

	function search() {
		console.log(key.value)
		uni.showToast({
			title: key.value
		})

	}
	const pics = ref([])
	async function getSwiper() {
		let {
			rows
		} = await uni.$get("/prod-api/api/rotation/list", {
			"type": 2
		})
		// console.log(rows)
		rows = rows.map(item => {
			item.advImg = uni.$base_url + item.advImg
			return item
		})
		rows=rows.filter(item=>{
			return item.isRecommend="Y"
		})
		pics.value = rows
	}
	const services=ref([])
	async function getService()
	{
		let {rows}=await uni.$get("/prod-api/api/service/list")
		rows = rows.map(item => {
			item.imgUrl = uni.$base_url + item.imgUrl
			return item
		})
		rows=rows.slice(0,9)
		rows.push({
			id:0,
			serviceName:"全部服务",
			imgUrl:"/static/images/全部服务nor@2x.png"
		})
		// console.log(rows)
		services.value=rows
	}
	
	function toservice(index)
	{
		if(index==9)
		{
			uni.switchTab({
				url:"/pages/allService/allService"
			})
		}
	}
	
	const newsTypes=ref([])
	async  function getNewsTypes()
	{
		let { data}=await uni.$get("/prod-api/press/category/list")
		newsTypes.value=data
		// console.log(newsTypes.value)
		getNewsList(data[0].id)
		
	}	
	const actIndex=ref(0)
	const newsList=ref([])
	async function getNewsList(typeId)
	{
		let {rows} =await uni.$get("/prod-api/press/press/list",{type:typeId})
		rows=rows.map(item=>{
			item.cover=uni.$base_url+item.cover
			item.content=item.content.substr(0,50)+"..."
			return item
		})
		newsList.value=rows		
	}
	function chg(index,typeId)
	{
		actIndex.value=index
		getNewsList(typeId)
	}
	
</script>

<style lang="scss">
	.main {
		background-color: #f2f2f2;
		height: calc(100vh - 50px - 44px);

		input {
			background-color: #fff;
			margin: 10px;
			border-radius: 10px;
			padding: 10px;
		}
		swiper{
			height: 180px;
			image{
				width: 100%;				 
			}			
		}
		.title{
			background-color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			padding: 10px;
			margin: 3px 0;
		}
		.service{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			background-color: #fff;
			padding-top: 10px;
			.item{
				width: 140rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 22rpx;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				
			}
		}
       .news{
		   .tab{
			   display: flex;
			   justify-content: space-around;
			   font-size: 26rpx;
			   background-color: #fff;
			   padding: 5px;
			   .item{
				   color:#000;
				   font-weight: normal;
				   padding-bottom: 5px;
			   }
			   .active{
				   color: #1b91ff;
				   font-weight: bold;
				   border-bottom: 2px solid #1b91ff;
			   }
		   }
		   .newslist{
			   display: flex;
			   margin: 5px;
			   background-color: #fff;
			   border: 1px solid #ccc;
			   padding: 5px;
			   .pic{
				   width: 200rpx;
				   height: 180rpx;
				   margin-right: 5px;
				   image{
					   width: 100%;
					   height: 100%;
				   }
				   
			   }
			   .content{
				   width: 500rpx;
				   font-size: 28rpx;
				   .ntitle{
					   font-weight: bold;
					   
				   }
				   .msg{
					   
				   }
			   }
		   }
	   }
	}
</style>